<template>
    <div>
        <div class="con">
        <h2>
            <span class="font1">我的服务 </span>
            <span class="font2 iconfont icon-lianxi">联系万表</span>
        </h2>
        <ul>
            <li v-for="(v,i) in arr" :key="i">
                <img :src="v.img" alt="">
                <span>{{v.title}} </span>
            </li>
         </ul>
        </div>
    </div>
</template>

<script>
import {one} from "@/api/topapi.js"
export default {
    data(){
        return{
            arr:[]
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr= ok.data.content1
        })
    }
}
</script>

<style lang="scss" scoped>
    h2{
        width: 100%;
        height: 0.41rem;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        font-weight: normal;
        background-color: #fff;
        .font1{
            font-size: 0.16rem;
           color: #666666;
           line-height: 0.41rem;
           padding-left: 0.1rem;
        }
        .font2{
            font-size: 0.14rem;
            color: #ababab;
            line-height: 0.41rem;
            padding-right: 0.1rem;
        }
    }
    ul{
        width: 100%;
        height:3.3rem;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
        li{
            display: flex;
            flex-direction: column;
            width: 0.93rem;
            height: 0.8rem;
            margin-top: 0.25rem;
            text-align:center;
            img{
                width: 0.5rem;
                height: 0.5rem;
                margin: 0 auto;
            }
            span{
                font-size: 0.14rem;
                color: #333;
            }
        }
    }
   
</style>